<template>
  <div class="review-status-chart">
    <div class="chart-header">
      <h3 class="text-lg font-semibold mb-4">审核状态分布</h3>
    </div>
    <div class="chart-container">
      <v-chart 
        class="chart" 
        :option="chartOption" 
        autoresize
      />
    </div>
    <div class="chart-legend">
      <div class="legend-item" v-for="item in legendData" :key="item.name">
        <div 
          class="legend-color" 
          :style="{ backgroundColor: item.color }"
        ></div>
        <span class="legend-text">{{ item.name }}</span>
        <span class="legend-count">({{ item.value }})</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册必要的组件
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

// 假数据 - 审核状态分布
const mockData = [
  { name: '待审核', value: 8, color: '#faad14' },
  { name: '已通过', value: 12, color: '#52c41a' },
  { name: '已拒绝', value: 3, color: '#ff4d4f' }
]

// 计算总数
const total = computed(() => mockData.reduce((sum, item) => sum + item.value, 0))

// 图例数据
const legendData = computed(() => 
  mockData.map(item => ({
    ...item,
    percentage: ((item.value / total.value) * 100).toFixed(1)
  }))
)

// 图表配置
const chartOption = computed(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    show: false // 使用自定义图例
  },
  series: [
    {
      name: '审核状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 8,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold',
          formatter: '{b}\n{d}%'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      labelLine: {
        show: false
      },
      data: mockData.map(item => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          color: item.color
        }
      }))
    }
  ]
}))

// 响应式处理
const chartRef = ref()

onMounted(() => {
  // 图表初始化完成后的处理
  nextTick(() => {
    if (chartRef.value) {
      chartRef.value.resize()
    }
  })
})
</script>

<style scoped>
.review-status-chart {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.chart-header {
  text-align: center;
  margin-bottom: 16px;
}

.chart-container {
  height: 300px;
  margin-bottom: 20px;
}

.chart {
  height: 100%;
  width: 100%;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-text {
  color: #333;
  font-weight: 500;
}

.legend-count {
  color: #666;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-legend {
    flex-direction: column;
    gap: 12px;
  }
  
  .legend-item {
    justify-content: center;
  }
}
</style>
